import { Component, Inject, Input, OnChanges, Optional, SimpleChanges } from "@angular/core";
import { MonkFormDesignComponent } from "../../monk-form-design.component";
import { MonkFormDesign, MonkFormDesignConfig, MONK_FORMDEISGN_CONFIG } from "../../monk-form-design.interface";
import { DesignFormBuildComponent } from "../../preview-form-design/design-form-build/design-form-build.component";

@Component({
  selector: 'app-design-form-item-properties',
  templateUrl: './design-form-item-properties.component.html',
  styleUrls: ['./design-form-item-properties.component.scss']
})
export class DesignFormItemPropertiesComponent implements OnChanges {
  @Input() selectItem: MonkFormDesign.AllType;
  @Input() hideModel;
  @Input() attrLists: Array<any> = []
  @Input() config;
  showMetaDataModel: boolean = true
  readonly openWindowFunction = 'window.open(`${window.location.origin}/sgportalapi/index/#/workBench/myWorkbench`)'
  // readonly fetchFunction = `fetch('/sgportalapi/indicatorExamine/getExamineFieldByExamineId?examineId=1612370976793751554')
  // .then(res => res.json())
  // .then(res => {
  //   let label = document.querySelector('app-design-form-build label#text_1680068716049');label && (label.textContent = JSON.stringify(res).slice(0, 20);})`
  
  
  //!!!!!!!!! jsonPathExpresion
  /** jsonpath: $..[?(@ && @.type && @.type == "text" && @.key == "text_1680068716049")] */
  //let labelObj  = document.querySelector('app-design-form-build label#text_1680068716049');label && (label.textContent = JSON.stringify(res).slice(0, 20);
  readonly fetchFunction = `fetch('/sgportalapi/indicatorExamine/getExamineFieldByExamineId?examineId=1612370976793751554')
   .then(res => res.json())
   .then(res => {
    if (this._DesignFormBuildComponent) {
      const json = this._DesignFormBuildComponent.json;
      const obj = jsonPath(json, '$..[?(@ && @.type && @.type == "text" && @.key == "text_1680068716049")]');
      if (obj && obj[0]) {
        obj[0].label = JSON.stringify(res).slice(0, 20)
      }
    }
  })`
  readonly familyOptions = [
    // 字体选择设置
    {
      value: "",
      label: "默认"
    },
    {
      value: "SimSun",
      label: "宋体"
    },
    {
      value: "FangSong",
      label: "仿宋"
    },
    {
      value: "SimHei",
      label: "黑体"
    },
    {
      value: "PingFangSC-Regular",
      label: "苹方"
    },
    {
      value: "KaiTi",
      label: "楷体"
    },
    {
      value: "LiSu",
      label: "隶书"
    }
  ]

  Infinity = Infinity

  get simpleSize() {
    return this.globalConfig?.simpleSize;
  }
  constructor(
    private _MonkFormDesignComponent: MonkFormDesignComponent,
    @Optional() @Inject(MONK_FORMDEISGN_CONFIG) public globalConfig: MonkFormDesignConfig
  ) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.attrLists) {
      if (this.config?.monkMetadata) {
        this.refreshDisableList()
      }
    }
  }

  get options(): any {
    return 'options' in this.selectItem? this.selectItem.options : {};
  }

  get showFreeModel() {
    if (this.config?.monkMetadata) {
      return !this.showMetaDataModel && (
        !this.hideModel && 'model' in this.selectItem &&
          typeof this.selectItem.model !== 'undefined'
      )
    } else {
      return (!this.hideModel && 'model' in this.selectItem &&
        typeof this.selectItem.model !== 'undefined')
    }
  }
  getType(input: unknown) {
    return typeof input
  }

  getOperationProperty() {
    return typeof this.options.hidden !== 'undefined' ||
      typeof this.options.disabled !== 'undefined' ||
      typeof this.options.readonly !== 'undefined' ||
      typeof this.options.clearable !== 'undefined' ||
      typeof this.options.multiple !== 'undefined' ||
      typeof this.options.range !== 'undefined' ||
      typeof this.options.showTime !== 'undefined' ||
      typeof this.options.allowHalf !== 'undefined' ||
      typeof this.options.showInput !== 'undefined' ||
      typeof this.options.animated !== 'undefined'
  }

  //----------metadata 元数据定制------------
  public refreshDisableList() {
    const list = this._MonkFormDesignComponent.recursiveGetComponentList()
    const modelKeyList = list.map(l => l.model)
    this.attrLists.forEach(attr => {
      attr.disabled = modelKeyList.includes(attr.jsonPath)
    })
  }

  attrSelectChange($event: string) {
    if (this.globalConfig?.attrSelectChange) {
      this.globalConfig.attrSelectChange.call(this, $event)
    }
  }
  //----------metadata------------


  colOverrideChange($event) {
    this.options.overrideLayout = $event
    if ($event) {
      this.options.labelCol = {...this.config.labelCol};
      this.options.wrapperCol = {...this.config.wrapperCol};
      this.options.labelWidth = this.config.labelWidth;
    }
  }

  handleChangeCol(e) {
    this.options.labelCol.xs = this.options.labelCol.sm = this.options.labelCol.md = this.options.labelCol.lg = this.options.labelCol.xl = this.options.labelCol.xxl = e;

    this.options.wrapperCol.xs = this.options.wrapperCol.sm = this.options.wrapperCol.md = this.options.wrapperCol.lg = this.options.wrapperCol.xl = this.options.wrapperCol.xxl =
      24 - e;
  }

  handleChangeLabelCol(e) {
    this.options.labelCol.xs = this.options.labelCol.sm = this.options.labelCol.md = this.options.labelCol.lg = this.options.labelCol.xl = this.options.labelCol.xxl = e;
  }
  handleChangeWrapperCol(e) {
    this.options.wrapperCol.xs = this.options.wrapperCol.sm = this.options.wrapperCol.md = this.options.wrapperCol.lg = this.options.wrapperCol.xl = this.options.wrapperCol.xxl = e;
  }

  changeSelectModel(model) {
    if ('model' in this.selectItem) {
      this.selectItem.model = model
      if (this.globalConfig?.syncKeyValue) {
        this.selectItem.key = model
      }
    }
  }

  changeSelectLabel(label) {
    this.selectItem.label = label
    if ('model' in this.selectItem && this.globalConfig?.syncModelByLabel) {
      this.changeSelectModel(label)
    }
  }
}